<template>
  <section>
    <el-row>
      <el-col class="header" :span="21">
        <div class="title">
          <span>鲜花分类管理</span>
          <el-button type="danger" @click="showAddCateDialog"
            >添加分类</el-button
          >
        </div>
      </el-col>
    </el-row>
    <!--分类列表展示-->
    <el-row>
      <el-col :span="21">
        <el-table :data="cateList" row-key="id" :border="true" :stripe="true">
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column label="分类名称" prop="type_name"> </el-table-column>

          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row.id)"
                >编辑</el-button
              >
              <el-popconfirm
                title="确定删除吗？"
                icon="el-icon-delete"
                iconColor="red"
                @confirm="removeCate(scope.row.id)"
              >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  slot="reference"
                  class="button_two"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--添加分类的对话框-->
    <el-dialog
      title="添加分类"
      width="50%"
      :visible.sync="addCateDialogVisible"
      :close-on-click-modal="false"
    >
      <!--内容主体-->
      <el-form
        :model="addCateForm"
        :rules="addCateFormRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="type_name">
          <el-input v-model="addCateForm.type_name"></el-input>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改分类的对话框-->
    <el-dialog
      title="修改分类"
      width="50%"
      :visible.sync="editCateDialogVisible"
      :close-on-click-modal="false"
    >
      <!--内容主体-->
      <el-form
        :model="addCateForm"
        :rules="addCateFormRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="type_name">
          <el-input v-model="addCateForm.type_name"></el-input>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="butCate">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
// 引入请求模块
import { $http } from "../../request/service";

export default {
  name: "ModifyWeight",
  data() {
    return {
      //商品分类的数据列表
      cateList: [],
      //修改商品的id
      butId: 0,
      //添加/修改分类对话框显示状态
      addCateDialogVisible: false,
      editCateDialogVisible: false,
      //添加分类的表单数据对象
      addCateForm: {
        type_name: "",
      },
      addCateFormRules: {
        type_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 请求获取商品分类
    this.getCateList();
  },
  methods: {
    // 获取商品分类列表
    getCateList() {
      $http.get(`/comtype`).then((res) => {
        if (res.code !== 200) return this.$message.error(res.data.msg);
        this.cateList = res.data;
      });
    },
    //显示添加分类对话框
    showAddCateDialog() {
      this.addCateDialogVisible = true;
      this.addCateForm.type_name = "";
    },

    //确定添加分类
    addCate() {
      if (this.addCateForm.type_name) {
        $http.post(`/comtype`, this.addCateForm).then((res) => {
          if (res.data.msg !== "添加成功")
            return this.$message.error(res.data.msg);
          this.addCateDialogVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getCateList();
        });
      } else {
        this.$message({
          message: "请先输入！",
          type: "warning",
        });
      }
    },
    //修改添加分类对话框
    showEditDialog(id) {
      this.editCateDialogVisible = true;
      this.addCateForm.type_name = "";
      this.butId = id;
    },
    //修改分类
    butCate() {
      $http.put(`/comtype/${this.butId}`, this.addCateForm).then((res) => {
        if (res.data.msg !== "修改成功")
          return this.$message.error(res.data.msg);

        this.editCateDialogVisible = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getCateList();
      });
    },

    //删除分类
    removeCate(id) {
      $http.delete(`/comtype/${id}`).then((res) => {
        if (res.data.msg !== "删除成功")
          return this.$message.error(res.data.msg);
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getCateList();
      });
    },
  },
};
</script>



<style scoped>
.button_two {
  margin-left: 30px;
}
.header {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.align {
}
.el-row {
  padding-top: 50px;
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  text-align: start;
  width: 100%;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 700;
}
.searchWai {
  padding-left: 260px;
}
</style>
